<script>
import axios from "axios";

export default {
  name: "Film",
  data() {
    return {
      films: [],
      total: 1,
      pageSize: 3,
      pageNum: 1,
      info: {}
    }
  },
  methods: {
    getInfoById(filmId=this.$route.query.id) {
      axios.get("https://m.maizuo.com/gateway", {
        params: {
          filmId
        },
        headers: {
          "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
          "X-Host": "mall.film-ticket.film.info"
        }
      }).then(value => {
        this.info = value.data.data.film;
      })
    },
    goHome() {
      this.$router.push("/");
    },
    getFilmList() {
      axios.get("https://m.maizuo.com/gateway?cityId=110100&type=1&k=6369336", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
          "X-Host": "mall.film-ticket.film.list"
        }
      }).then(value => {
        this.films = value.data.data.films;
        this.total = value.data.data.total;
      })
    }
  },
  watch: {
    pageNum() {
      this.getFilmList();
    },
  },
  mounted() {
    this.getFilmList();
    if (this.$route.query.id) {
      this.getInfoById();
    }
  },
  computed: {
    pageSum() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  beforeRouteUpdate(to,from,next){
    this.getInfoById(to.query.id);
    next();
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated(){
    console.log("updated")
  }
}
</script>

<template>
  <div>
    <button @click="goHome">返回首页</button>
    <button v-show="pageNum>1" @click="pageNum--">上一页</button>
    {{ pageNum }}/{{ pageSum }}
    <button v-show="pageNum<pageSum" @click="pageNum++">下一页</button>
    <div v-for="item in films" :key="item.filmId">
      <router-link :to="'/film?id='+item.filmId">{{ item.name }}</router-link>
    </div>
    <hr/>
    <h3>{{ info.name }}</h3>
    <p>{{ info.synopsis }}</p>
    <img :src="info.poster" alt="">
  </div>
</template>

<style scoped>

</style>